<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="__ADMIN__/css/font.css">
<link rel="stylesheet" href="__ADMIN__/css/xadmin.css">
<script type="text/javascript" src="__ADMIN__/js/jquery.min.js"></script>
<script type="text/javascript" src="__ADMIN__/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__ADMIN__/js/xadmin.js"></script>
<script type="text/javascript" src="__ADMIN__/js/cookie.js"></script>
<style>
.layui-btn+.layui-btn{
    margin-left: 0;
}
.layui-table td, .layui-table th
{
    min-width: 50px !important;
}
</style>
</head>

<body>
<div class="x-body x-admin">
    
    <div class="layui-table-body layui-table-main" style="width: 100%;min-height:0;max-width:800px">
        <form id="form" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">zip压缩包</label>
            <div class="layui-input-inline">
                <input type="file" id="fileBig" >
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">开始上传</button>
                <a href="/uploads/example/今日之星模板压缩包.zip" class="layui-btn layui-btn-primary">查看压缩包例子</a>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-progress" lay-showpercent="true" lay-filter="upload-progress" id="upload-progress">
                  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                点击开始上传后请耐心等待
            </div>
        </div>
        </form>
        
    </div>
    
</div>

<script>
layui.use(['element', 'layer', 'jquery', 'table', 'util', 'upload'], function() {
	var element = layui.element,
		layer = layui.layer,
		$ = layui.jquery,
		table = layui.table,
		util = layui.util,
		upload = layui.upload;
	$('#form').submit(function() {
		let file = $(":file")[0].files[0];
		let fileName = file.name;
		let fileSize = file.size;
		let blockSize = 5 * 1024 * 1024;
		let num = Math.ceil(fileSize / blockSize);
		let start = 0;
		let end = 0;
		layer.load(2, {
          shade: [0.5,'#ccc']
        });
		console.log('fileName', fileName);
		console.log('fileSize', fileSize);
		console.log('num', num);
		//return false;
		for (let i = 1; i <= num; i++) {
			end = blockSize * i;
			if (end > fileSize) {
				end = fileSize
			}
			let block = file.slice(start, end);
			start = end;
			let fd = new FormData();
			fd.append('block', block);
			fd.append('name', fileName);
			fd.append('total', num);
			fd.append('index', i);
			console.log('fd', fd);
            $.ajax({
    			url: "{:url('operators/templatemutiplyupload')}",
    			type: "POST",
    			data: fd,
    			async: false,
    			processData: false,
    			contentType: false,
    			success: function(res) {
    			    console.log(i, num);
    				if (res.code == 0) {
        			    element.progress('upload-progress', Math.floor(i / num * 100 * 100) / 100 + '%');
    				} else if(res.code == 1){
    				    layer.alert('上传完成', {icon:1},function(){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            x_admin_father_reload();
                        });
    				}else {
    					
    				}
    			},
    			error: function() {
    
    			}
    		})

		}
		return false
	});
	
 
});

</script>
</body>

</html>